<template>
    <el-dialog class="select-keyword-dialog" title="请选择keyword" width="30%"
               :closeOnClickModal="false"
               :visible.sync="visible" :before-close="handleClose" appendToBody>

        <el-select class="select" v-model="select" placeholder="请选择" value="">
            <el-option
                    v-for="field in fields"
                    :key="field.COLUMN_NAME"
                    :label="field.COLUMN_NAME"
                    :value="field.COLUMN_NAME">
            </el-option>
        </el-select>

        <div slot="footer">
            <el-button type="info" @click="submitClick">确 认</el-button>
        </div>
    </el-dialog>
</template>

<script type="text/ecmascript-6">
    /**
     * @author 白雨浓
     * @date 2018/1/24 10:21
     *
     * 选择keyword窗口
     **/
    export default{
        name: 'AcSelectKeywordDialog',
        props: ['dialogVisible', 'fields'],
        data(){
            return {
                visible: this.dialogVisible,
                select: ''
            }
        },
        mounted(){
            this.$nextTick(() => {

            })
        },
        methods: {
            submitClick(){
                this.$emit('onSubmit', this.select);
                this.visible = false;
            },
            /** 关闭处理 */
            handleClose(){
                this.visible = false;
                this.$emit('onClose');
                setTimeout(() => this.$emit('update:dialogVisible', false), 300);
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .select-keyword-dialog {

        .select {
            display block
            margin auto
            text-align center
        }

    }
</style>